<template>
	<view>

		<view class="tab-bar">
			<view :class="['tab-item', currentTab === 0 ? 'active' : '']" @click="switchTab(0)">追踪</view>
			<view :class="['tab-item', currentTab === 1 ? 'active' : '']" @click="switchTab(1)">话题榜</view>
			<view :class="['tab-item', currentTab === 2 ? 'active' : '']" @click="switchTab(2)">观点榜</view>
		</view>

		<!-- 内容区 -->
		<view v-show="currentTab === 0" class="tab-content">内容 1</view>
		<view v-show="currentTab === 1" class="tab-content">
			<TopicItem></TopicItem>
		</view>
		<view v-show="currentTab === 2" class="tab-content">
			<view class="gd-item"><text>1 </text>

				丁俊晖：久违的147
			</view>
			<view class="gd-item"><text>2</text>

				哈登19+7+10 快船送太阳两连败
			</view>
			<view class="gd-item"><text>3</text>

				长江从“休养生息”奔向“生生不息”
			</view>
			<view class="gd-item"><text>4</text>

				女儿见到缉毒警爸爸撒腿就跑
			</view>
			<view class="gd-item"><text>5</text>

				打假人举报“30多亿股权卖1元”
			</view>
			<view class="gd-item"><text>6</text>

				专家建议调高中国退休年龄
			</view>
			<view class="gd-item"><text>7</text>

				女儿已经1米63 生病难受父亲仍抱着
			</view>
			<view class="gd-item"><text>8</text>

				《繁花》开虐了
			</view>
			<view class="gd-item"><text>9</text>

				情侣疑吵架跳河双双身亡
			</view>
			<view class="gd-item"><text>10</text>

				河南辟谣“人贩子将女孩双脚绑缚”
			</view>
		</view>


	</view>
</template>

<script>
	import TopicItem from "../../components/TopicItem.vue"
	export default {
		data() {
			return {
				currentTab: 1,
				i: 1,
			};
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			
		},
		components: {
			TopicItem
		}
	};
</script>


<style>
	.tab-bar {
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		border-bottom: 1px solid #eaeaea;
	}

	.tab-item {
		padding: 10px 15px;
		text-align: center;
	}

	.tab-item.active {
		color: #F5433F;
		/* 活动tab的颜色 */
		border-bottom: 2px solid #F5433F;
		/* 活动tab的底部边框 */
	}

	.tab-content {
		padding: 20px;
		/* 根据需要添加更多样式 */
	}

	.gd-item {
		line-height: 120rpx;
		border-bottom: 2rpx #ccc solid;
	}

	.gd-item:nth-child(-n+3) text {
		/* 前三个元素的特殊样式 */
		font-weight: bold;
		color: #F5433F;
		font-size: 40rpx;
	}

	.gd-item text {
		/* 基本样式 */
		font-size: 34rpx;
		color: #333;
		margin-right: 5px;
		/* 在数字和文本之间添加一些空间 */
	}
</style>